class Magnifier {
		constructor(smallBox, mask, bigBox) {
			this.oSmallBox = smallBox;
			this.oMask = mask;
			this.oBigBox = bigBox;
			this.eventBind();
		}

		mouseover() {
			let that = this;
			this.oSmallBox.onmouseover = function() {
				that.oMask.style.display = "block";
				that.oBigBox.style.display = "block";
			}
		}

		mouseout() {
			let that = this;
			this.oSmallBox.onmouseout = function() {
				that.oMask.style.display = "none";
				that.oBigBox.style.display = "none";
			}
		}

		mousemove() {
			let that = this;
			this.oSmallBox.onmousemove = function(evt) {
				let e = evt || event;
				let left = e.pageX - this.offsetLeft - that.oMask.offsetWidth / 2;
				let top = e.pageY - this.offsetTop - that.oMask.offsetHeight / 2;

				if (left < 0) {
					left = 0;
				}

				let maxLeft = this.offsetWidth - that.oMask.offsetWidth;

				if (left > maxLeft) {
					left = maxLeft;
				}

				if (top < 0) {
					top = 0;
				}

				let maxTop = this.offsetHeight - that.oMask.offsetHeight;

				if (top > maxTop) {
					top = maxTop;
				}

				let x = that.oBigBox.offsetWidth * left / that.oMask.offsetWidth;
				let y = that.oBigBox.offsetHeight * top / that.oMask.offsetHeight;

				that.oMask.style.left = left + "px";
				that.oMask.style.top = top + "px";

				that.oBigBox.style.backgroundPositionX = -x + "px";
				that.oBigBox.style.backgroundPositionY = -y + "px";
			}
		}

		eventBind() {
			this.mouseover();
			this.mouseout();
			this.mousemove();
		}
	}
